<template>
  <div class="payment-list-item">
    <van-card
      :num="data?.num"
      :price="data?.price"
      :desc="data?.shopper"
      :title="data?.title"
      :thumb="data?.img"
    />
  </div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const data = computed(() => props.data);
</script>

<style scoped lang="scss">
.payment-list-item {
  margin-bottom: 12px;
  
  &:last-child {
    margin-bottom: 0;
  }
  :deep(.van-card) {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      transform: translateY(-1px);
    }
    
    .van-card__header {
      padding: 16px;
    }
    
    .van-card__content {
      min-height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .van-card__title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 6px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .van-card__desc {
      font-size: 13px;
      color: #666;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .van-card__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
    }
    
    .van-card__price {
      font-size: 18px;
      font-weight: 600;
      color: #ee0a24;
      
      &-currency {
        font-size: 14px;
      }
      
      &-integer {
        font-size: 18px;
      }
      
      &-decimal {
        font-size: 14px;
      }
    }
    
    .van-card__num {
      font-size: 14px;
      color: #969799;
      background: #f8f8f8;
      padding: 4px 8px;
      border-radius: 4px;
    }
    
    .van-card__thumb {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .van-card__footer {
      padding: 12px 16px;
      background: #fafafa;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: flex-end;
    }
  }
}

// 响应式设计
@media (max-width: 375px) {
  .payment-list-item {
    :deep(.van-card) {
      .van-card__header {
        padding: 12px;
      }
      
      .van-card__thumb {
        width: 70px;
        height: 70px;
      }
      
      .van-card__title {
        font-size: 15px;
      }
      
      .van-card__price {
        font-size: 16px;
        
        &-integer {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
